﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>{{title}}</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
	var map;
	function initialize() {
		var myLatlng = new google.maps.LatLng(31.026239, 121.427068);
		var myOptions = {
			zoom: 17,
			center: myLatlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		
		{% for loc in aploc %}
		var latlng = new google.maps.LatLng({{loc.lat}}, {{loc.long}});
		var marker = new google.maps.Marker({
			position: latlng, 
			map: map,
			title: "Hello World!",
			//icon: "/media_test/img/ap.png"
		});
		{% endfor %}
		
		var latlng = new google.maps.LatLng({{usrloc.lat}}, {{usrloc.long}});
		var marker = new google.maps.Marker({
			position: latlng, 
			map: map,
			title: "Your Position",
			icon: "/media_test/img/ap_32.png"
		});
		
		google.maps.event.addListener(marker, 'click', function() {
				window.location.href = "/wp/map/{{field_id}}/?type=indoor&mt=0.05";
		});
		
	}
	
    </script>
	<style>
			body {
				font-family:Arial;
			}
			h4 {
				font-size:15px;
				color: red;
				margin: 0px;
			}
			#map_canvas {
				float:left;
			}
			#choice {
				float:left;
				font-size:14px;
				margin-top: -50px;
				padding-left: 20px;
			}
			#choice fieldset{
				padding: 10px;
				margin: 10px 0px 10px 0px;
			}		
		</style>
  </head>
  <body onload="initialize()" style="font-family: Arial;border: 0 none;">
		<h2>Wi-Fi Location and Tracking System</h2>
		<div id = "info">
			<h4>
				We use the algorithm : {{algorithm_type}}
				{% if use_fuzzy %}
				and the Fuzzy Algorithm will be used.
				{% endif %}
			</h4>
			{% if show_track %}
			<h4>The Tracking is on</h4>
			{% endif %}
		</div>
		<div id="map_canvas" style="width: 800px; height: 500px"></div>
		<div id="choice">
			<form name="wp" action="" method="POST">
			<h3>Make Your Decision</h3>
			<fieldset>
				<legend>Choose The Algorithm Type</legend>
					<input type="radio" name="algorithm" value="Strongest"/>
					<label>Strongest AP</label><br>
					<input type="radio" name="algorithm" value="ThreePoint" />
					<label>Three Point</label><br>
					<input type="radio" name="algorithm" value="FingerPrint" />
					<label>Finger Print</label><br> 
					<input type="radio" name="algorithm" value="Hybrid" />
					<label>Hybrid</label><br>
			</fieldset>
			<fieldset>
				<legend>Optional</legend>
					<input type="checkbox" name="fuzzy" value="fuzzy" />
					<label>Fuzzy Alogrithm</label><br>
					<input type="checkbox" name="track" value="show" />
					<label>Show User's Track</label><br>
			</fieldset>
				<input type="submit" name="submit" value="submit" />
			</form>
		</div>
	</body>
</html>